import Home from "./views/home.vue";

const routes = [
  // 重定向 => redireact
  { path: "/", name: "index", redirect: "/home" },
  { path: "/home", name: "Home", component: Home },
  { path: "/home1", name: "Home1", component: Home },
  { path: "/home2", name: "Home2", component: Home },
  /* 
    动态传参 => :id
    props => 允许 id 作为属性传给这个组件
    children => 层级
  */
  {
    path: "/home3/:id",
    name: "Home3",
    component: () => import("./views/home.vue"),
    props: true,
    /*
      注意 path 中的 "/"
        path: "homeChildren" => /home3/:id/homeChildren
        path: "/homeChildren" => /homeChildren
    */
    children: [
      {
        path: "homeChildren",
        name: "HomeChildren",
        component: () => import("./views/homeChildren.vue"),
      },
      {
        path: "/homeChildren",
        name: "HomeChildren",
        component: () => import("./views/homeChildren.vue"),
      },
    ],
  },
  /*
    通配 => *
    如果以上路由都未匹配到，则匹配到 404 页面
  */
  { path: "*", name: "404", component: () => import("./views/error.vue") },
];

export default routes;
